2: React.lazy load HyloEditorMobile for code-splitting to improve load time in HyloApp
#1322
Conversation
…p allowing it to code-split with minimum dependencies
lorenjohnson
force-pushed
the
improve-mobile-editor-performance
branch
from
ae68db8
to
beafd50
Compare
Codecov ReportBase: 49.22% // Head: 49.11% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## HyloApp-544-add-group-explore-and-about #1322 +/- ##
===========================================================================
- Coverage 49.22% 49.11% -0.12%
===========================================================================
Files 539 538 -1
Lines 12029 12058 +29
Branches 3444 3451 +7
===========================================================================
+ Hits 5921 5922 +1
- Misses 6108 6136 +28
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
lorenjohnson
changed the title
React.lazy loads HyloEditorMobile for code-splitting to improve load time in HyloAppReact.lazy load HyloEditorMobile for code-splitting to improve load time in HyloApp
lorenjohnson
changed the title
React.lazy load HyloEditorMobile for code-splitting to improve load time in HyloAppReact.lazy load HyloEditorMobile for code-splitting to improve load time in HyloApp
…editor-performance
…editor-performance
lorenjohnson
changed the base branch from
ssr-code-splitting-and-redux-tidy
to
dev
…obile-editor-performance
lorenjohnson
changed the base branch from
dev
to
HyloApp-544-add-group-explore-and-about
| @@ -1,6 +1,9 @@ | |||
| import fetch from 'isomorphic-fetch' | |||
There was a problem hiding this comment.
Oh are we still specifically importing fetch? I think I used it 'raw' in a reactions PR... which might be a gap on older browsers (has fetch crossed the line into availability??)
There was a problem hiding this comment.
ahh, this file can run on both front and backends....
|
so it this no longer a Draft? |
|
It likely needs to have |
Remaining tasks:
Benefits:
Reduces the size of
hyloApp/editor/HyloEditorMobileload in HyloApp from ~2 MB to ~600k, which made a palpable difference in testing. It would be more important of a difference in the case of a poor or slow mobile data connection.Most likely we will also be creating a WebView for our ReactPlayer usage to get Video Emebeds working in the App. It will also want/need this top-level treatment: https://github.com/Hylozoic/HyloReactNative/issues/567
A good and likely necessary first step towards moving the Mobile Editor code locally into the native app, which is where we ultimately should be (ref. https://github.com/Hylozoic/HyloReactNative/issues/572)
Sets the stage for further lazy-loading / code-splitting down the line in the router.
Background:
We are currently using
React.lazyandSuspenseto delay load of theNotificationsandMessagesdrop-downs and this extends that usage to the very top. Our previously somewhat woven-in SSR setup wouldn't have allowed us to useReact.lazyin non-authed views (Suspenseis not supported by React server rendering). The cleaned-up SSR setup in the branch this is based upon should remedy that such thatApp(which wasclientRouter) now will only ever get rendered client-side.